import React, { useState } from 'react';
import { NuiBt, for_obj, obj_empty, is_empty } from 'sui';

const KeyBoard = ({ lst, value, setValue, className, type }) => {
    const [shift, setShift] = useState(false);

    const hevent = (event) => event.preventDefault();

    const Btn = ({ val, className, label, width="w-12" }) => {
        const hcmd = (event) => {
            event.preventDefault();

            if (is_empty(lst)) {
                return;
            }

            const f = lst.find(d => {
                if (document.activeElement === d.ref.current) {
                    return true;
                }

                return false;
            });

            if (f) {
                if (val === "backspace") {
                    if (obj_empty(value)) {
                        return;
                    }

                    let tmp = value[f.k];
                    if (!tmp) {
                        return;
                    }

                    tmp = tmp.slice(0, -1);

                    let ret = {};
                    if (!obj_empty(value)) {
                        for_obj(value, (k, v) => ret[k] = v);
                    }
                    ret[f.k] = tmp;

                    setValue(ret);

                    return;
                }

                let ret = {};
                if (!obj_empty(value)) {
                    for_obj(value, (k, v) => ret[k] = v);
                }

                if (ret[f.k]) {
                    ret[f.k] = ret[f.k] + val;
                }
                else {
                    ret[f.k] = val;
                }
                setValue(ret);
            }
        };

        return <NuiBt color="gray" className={`mr-3 ${width}`} hcmd={hcmd} onMouseDown={hevent} onMouseUp={hevent}>{label ? label : val}</NuiBt>;
    };

    const getView = () => {
        const getAbc = (v) => {
            if (shift) {
                return v.toUpperCase();
            }

            return v;
        };

        if (type === "num") {
            return (
                <div className="flex flex-col">
                    <div className="inline-flex">
                        <Btn val="1"/>
                        <Btn val="2"/>
                        <Btn val="3"/>
                        <Btn val="4"/>
                        <Btn val="backspace" width="w-px-btn"/>
                    </div>
                    <div className="inline-flex">
                        <Btn val="5"/>
                        <Btn val="6"/>
                        <Btn val="7"/>
                        <Btn val="8"/>
                        <Btn val="9"/>
                        <Btn val="0"/>
                    </div>
                </div>
            );
        }

        return (
            <div className="flex flex-col">
                <div className="inline-flex">
                    <Btn val="1"/>
                    <Btn val="2"/>
                    <Btn val="3"/>
                    <Btn val="4"/>
                    <Btn val="5"/>
                    <Btn val="backspace" width="w-px-btn"/>
                </div>
                <div className="inline-flex">
                    <Btn val="6"/>
                    <Btn val="7"/>
                    <Btn val="8"/>
                    <Btn val="9"/>
                    <Btn val="0"/>
                    <NuiBt color={ shift ? "green" : "gray"} className="mr-3 pl-3 pr-3 w-px-btn"
                        hcmd={(event) => {
                            event.preventDefault();
                            setShift(!shift);
                        }}
                        onMouseDown={hevent}
                        onMouseUp={hevent}
                    >shift</NuiBt>
                </div>
                <div className="inline-flex">
                    <Btn val="."/>
                    <Btn val="*"/>
                    <Btn val="#"/>
                    <Btn val="+"/>
                    <Btn val="-"/>
                    <Btn val=" " label="space" width="w-px-btn"/>
                </div>
                <div className="inline-flex">
                    <Btn val={getAbc("a")}/>
                    <Btn val={getAbc("b")}/>
                    <Btn val={getAbc("c")}/>
                    <Btn val={getAbc("d")}/>
                    <Btn val={getAbc("e")}/>
                    <Btn val={getAbc("f")}/>
                    <Btn val={getAbc("g")}/>
                </div>
                <div className="inline-flex">
                    <Btn val={getAbc("h")}/>
                    <Btn val={getAbc("i")}/>
                    <Btn val={getAbc("j")}/>
                    <Btn val={getAbc("k")}/>
                    <Btn val={getAbc("l")}/>
                    <Btn val={getAbc("m")}/>
                    <Btn val={getAbc("n")}/>
                </div>
                <div className="inline-flex">
                    <Btn val={getAbc("o")}/>
                    <Btn val={getAbc("p")}/>
                    <Btn val={getAbc("q")}/>
                    <Btn val={getAbc("r")}/>
                    <Btn val={getAbc("s")}/>
                    <Btn val={getAbc("t")}/>
                    <Btn val={getAbc("u")}/>
                </div>
                <div className="inline-flex">
                    <Btn val={getAbc("v")}/>
                    <Btn val={getAbc("w")}/>
                    <Btn val={getAbc("x")}/>
                    <Btn val={getAbc("y")}/>
                    <Btn val={getAbc("z")}/>
                </div>
            </div>
        );
    };

    return (
        <div className={className}>
            {getView()}
        </div>
    )
};

const NumBoard = ({ lst, value, setValue, className, type }) => {
    const hevent = (event) => event.preventDefault();

    const Btn = ({ val, className, label, width="w-32" }) => {
        const hcmd = (event) => {
            event.preventDefault();

            if (is_empty(lst)) {
                return;
            }

            const f = lst.find(d => {
                if (document.activeElement === d.ref.current) {
                    return true;
                }

                return false;
            });

            if (f) {
                if (val === "backspace") {
                    if (obj_empty(value)) {
                        return;
                    }

                    let tmp = value[f.k];
                    if (!tmp) {
                        return;
                    }

                    tmp = tmp.slice(0, -1);

                    let ret = {};
                    if (!obj_empty(value)) {
                        for_obj(value, (k, v) => ret[k] = v);
                    }
                    ret[f.k] = tmp;

                    setValue(ret);

                    return;
                }

                let ret = {};
                if (!obj_empty(value)) {
                    for_obj(value, (k, v) => ret[k] = v);
                }

                if (ret[f.k]) {
                    ret[f.k] = ret[f.k] + val;
                }
                else {
                    ret[f.k] = val;
                }
                setValue(ret);
            }
        };

        return <NuiBt color="gray" className={`mr-8 mb-8 h-24 ${width}`} hcmd={hcmd} st="text-white text-3xl"
                      onMouseDown={hevent} onMouseUp={hevent}>{label ? label : val}</NuiBt>;
    };

    return (
        <div className={className}>
            <div className="flex flex-col">
                <div className="inline-flex">
                    <Btn val="1"/>
                    <Btn val="2"/>
                    <Btn val="3"/>
                    <Btn val="4"/>
                    <Btn val="5"/>
                    <Btn val="backspace" width="w-px-bk"/>
                </div>
                <div className="inline-flex">
                    <Btn val="6"/>
                    <Btn val="7"/>
                    <Btn val="8"/>
                    <Btn val="9"/>
                    <Btn val="0"/>
                    <Btn val="."/>
                    <Btn val="-"/>
                </div>
            </div>
        </div>
    )
};

const NumVer = ({ lst, value, setValue, className, type }) => {
    const hevent = (event) => event.preventDefault();

    const Btn = ({ val, className, label, width="w-32" }) => {
        const hcmd = (event) => {
            event.preventDefault();

            if (is_empty(lst)) {
                return;
            }

            const f = lst.find(d => {
                if (document.activeElement === d.ref.current) {
                    return true;
                }

                return false;
            });

            if (f) {
                if (val === "backspace") {
                    if (obj_empty(value)) {
                        return;
                    }

                    let tmp = value[f.k];
                    if (!tmp) {
                        return;
                    }

                    tmp = tmp.slice(0, -1);

                    let ret = {};
                    if (!obj_empty(value)) {
                        for_obj(value, (k, v) => ret[k] = v);
                    }
                    ret[f.k] = tmp;

                    setValue(ret);

                    return;
                }

                let ret = {};
                if (!obj_empty(value)) {
                    for_obj(value, (k, v) => ret[k] = v);
                }

                if (ret[f.k]) {
                    ret[f.k] = ret[f.k] + val;
                }
                else {
                    ret[f.k] = val;
                }
                setValue(ret);
            }
        };

        return <NuiBt color="gray" className={`mr-8 mb-8 h-24 ${width}`} hcmd={hcmd} st="text-white text-3xl"
                      onMouseDown={hevent} onMouseUp={hevent}>{label ? label : val}</NuiBt>;
    };

    return (
        <div className={className}>
            <div className="flex flex-col">
                <div className="inline-flex">
                    <Btn val="1"/>
                    <Btn val="2"/>
                    <Btn val="3"/>
                    <Btn val="4"/>
                </div>
                <div className="inline-flex">
                    <Btn val="5"/>
                    <Btn val="6"/>
                    <Btn val="7"/>
                    <Btn val="8"/>
                </div>
                <div className="inline-flex">
                    <Btn val="9"/>
                    <Btn val="0"/>
                    <Btn val="-"/>
                </div>
                <div className="inline-flex">
                    <Btn val="backspace" width="w-px-bk"/>
                </div>
            </div>
        </div>
    )
};

export {NumVer, KeyBoard, NumBoard};
